import React, { Component } from 'react'

// 使用react-redux 方式，跨组件传递，不需要使用 props 一层一层传递了
import {connect} from 'react-redux'

import { add, reduce } from '../../actions/cart'

// 装饰器模式  @connect(mapState, {add, reduce})
// export default class CarList extends Component {
class CarList extends Component {
    // constructor() {
    //     super()
    //     this.state = {
    //         cartList: []
    //     }
    // }
    // getState = () => {
    //     this.setState({
    //         cartList: this.props.store.getState().cart
    //     })
    // }
    // componentDidMount() {
    //     this.getState()
    //     this.props.store.subscribe(this.getState)           // 监听变化
    // }

    render() {
        // console.log(this.props)     // 有了 dispatch
        return (
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {/* {
                        this.state.cartList.map(item => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.title}</td>
                                    <td>{item.price}</td>
                                    <td>
                                        <button onClick={
                                            () => {
                                                this.props.store.dispatch(reduce(item.id))
                                            }
                                        }>-</button>
                                        <span>{item.amount}</span>
                                        <button onClick={
                                            () => {
                                                this.props.store.dispatch(add(item.id))
                                            }
                                        }>+</button>
                                    </td>
                                    <td></td>
                                </tr>
                            )
                        })
                    } */}
                    {
                        this.props.cartList.map(item => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.title}</td>
                                    <td>{item.price}</td>
                                    <td>
                                        <button onClick={
                                            () => {
                                                this.props.reduce(item.id)
                                            }
                                        }>-</button>
                                        <span>{item.amount}</span>
                                        <button onClick={
                                            () => {
                                                this.props.add(item.id)
                                            }
                                        }>+</button>
                                    </td>
                                    <td></td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </table>
        )
    }
}

const mapState = (state) => {   // mapStateToProps，这里的state实际上是 store.getState()的值
    return {
        cartList: state.cart
    }
}
// const mapDispatch = (dispatch) => {     // mapDispatchToProps
//     return {
//         add: (id) => dispatch(add(id)),
//         reduce: (id) => dispatch(reduce(id))
//     }
// }
// connect执行后得到一个高阶组件， 传入当前组件，当前组件的 props里就有了 dispatch 这个分发事件的方法
// connect 第一次执行 传的参数是一个执行函数， 这个执行函数可以把 store里的 state 的数据 和 action 方法 添加到当前组件的 props 上
// export default connect(mapState, mapDispatch)(CarList)
// connect 方法有四个参数，常用的就是前面两个，第一个是 mapStateToProps， 第二个参数可以是 mapDispatchToProps
export default connect(mapState, {add, reduce})(CarList)            // 在写action的时候使用的是函数返回的方式可以直接这样传递一个方法对象
